<script setup lang="ts">
import { useUserStore } from '@/stores/userStore'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import SideBar from '@/components/SideBar.vue'
import { Guide } from '@element-plus/icons-vue'

const userStore = useUserStore()
const router = useRouter()




// 青岛地区自然保护区信息
const protectionAreas = ref([
  {
    id: 1,
    name: '胶南灵山岛保护区',
    type: '海岛生态系统',
    area: '5.2平方公里',
    location: '山东省青岛市黄岛区灵山岛',
    description: '胶南灵山岛是青岛市最大的海岛，素有"中国北方第一高岛"之称。岛上山峦起伏，植被茂密，拥有独特的海岛生态系统。岛屿四周海水清澈，海洋生物资源丰富，是重要的海洋生态保护区。岛上还保存着丰富的历史文化遗迹和民俗文化。'
  },
  {
    id: 2,
    name: '大公岛保护区',
    type: '海岛生态系统',
    area: '3.8平方公里',
    location: '山东省青岛市即墨区大公岛',
    description: '大公岛是青岛近海重要的海岛生态保护区，岛上植被覆盖率高，拥有多种珍稀鸟类栖息地。周围海域海洋生物多样性丰富，是重要的海洋生态系统保护区域。岛屿地形复杂多样，具有重要的科研和生态保护价值。'
  },
  {
    id: 3,
    name: '大泽山保护区',
    type: '山地生态系统',
    area: '45平方公里',
    location: '山东省青岛市平度市大泽山镇',
    description: '大泽山是胶东半岛著名的山峰，素有"胶东屋脊"之称。山区森林覆盖率高，生物多样性丰富，是重要的水源涵养地。山上古树参天，奇石林立，还有丰富的历史文化遗迹，是集生态保护、科研教育和旅游观光于一体的综合性保护区。'
  },
  {
    id: 4,
    name: '崂山保护区',
    type: '山地生态系统',
    area: '446平方公里',
    location: '山东省青岛市崂山区',
    description: '崂山是中国海岸线第一高峰，素有"海上第一名山"之称。山区生态系统完整，拥有丰富的动植物资源，是国家级风景名胜区和自然保护区。崂山不仅具有重要的生态价值，还承载着深厚的道教文化和历史文化底蕴。'
  },
  {
    id: 5,
    name: '胶州艾山保护区',
    type: '山地生态系统',
    area: '12平方公里',
    location: '山东省青岛市胶州市洋河镇',
    description: '胶州艾山是胶州市境内的重要山峰，山区植被茂密，生态环境优良。艾山具有重要的水源涵养功能，是当地重要的生态屏障。山上还保存着丰富的历史文化遗迹，是集生态保护和文化传承于一体的保护区。'
  },
  {
    id: 6,
    name: '马山保护区',
    type: '地质生态系统',
    area: '8平方公里',
    location: '山东省青岛市即墨区金口镇',
    description: '马山是著名的地质公园，拥有独特的火山地貌和地质构造。山区生态环境良好，地质遗迹丰富，是重要的地质科普教育基地。马山的柱状节理石柱群被誉为"中国第一石柱群"，具有极高的科研价值和观赏价值。'
  }
])

// 当前选中的保护区
const currentArea = ref(protectionAreas.value[0])

// 选择保护区
const selectArea = (area: any) => {
  currentArea.value = area
}


</script>

<template>
  <el-container class="app-container">
    <el-aside>
      <SideBar />
    </el-aside>
    <el-main>
      <div class="home-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="welcome-card">
          <template #header>
            <div class="card-header">
              <h2>欢迎使用青岛地区自然保护区系统</h2>
            </div>
          </template>

          <div class="user-info">
            <div class="avatar">
              <el-avatar :size="64" :src="userStore.currentUser?.avatar">
                {{ userStore.currentUser?.name?.substring(0, 1) || userStore.currentUser?.username.substring(0, 1) }}
              </el-avatar>
            </div>

            <div class="info">
              <h3>{{ userStore.currentUser?.name || userStore.currentUser?.username }}</h3>
              <p>
                <el-tag :type="userStore.isAdmin ? 'danger' : 'success'">
                  {{ userStore.isAdmin ? '管理员' : '普通用户' }}
                </el-tag>
              </p>
              <p v-if="userStore.currentUser?.email">邮箱: {{ userStore.currentUser.email }}</p>
            </div>
          </div>

          <div class="welcome-message">
            <p>您已成功登录青岛地区自然保护区系统。本系统以胶南灵山岛、大公岛、大泽山、崂山、胶州艾山和马山六大自然保护区为研究对象，提供保护区浏览、资源管理和环境保护功能。</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="protection-area-section">
      <el-col :span="24">
        <h2 class="section-title">青岛地区六大自然保护区信息</h2>
      </el-col>

      <!-- 保护区列表 -->
      <el-col :span="8" v-for="area in protectionAreas" :key="area.id">
        <el-card
          class="area-card"
          :class="{ 'active': currentArea.id === area.id }"
          @click="selectArea(area)"
        >
          <div class="area-icon">
            <!-- 胶南灵山岛保护区 - 海岛图标 -->
            <svg v-if="area.id === 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="10" r="3"/>
              <path d="M12 21.7C17.3 17 20 13 20 10a8 8 0 1 0-16 0c0 3 2.7 7 8 11.7z"/>
              <path d="M8 14c0 2 2 4 4 4s4-2 4-4"/>
              <path d="M6 18h12"/>
            </svg>

            <!-- 大公岛保护区 - 海岛生态图标 -->
            <svg v-else-if="area.id === 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M3 18h18"/>
              <path d="M5 15c2-1 4-1 6 0s4 1 6 0"/>
              <circle cx="8" cy="12" r="2"/>
              <circle cx="16" cy="10" r="3"/>
              <path d="M6 8c1-2 3-3 6-2s5 2 6 4"/>
              <path d="M12 6l2-2m-2 2l-2-2"/>
            </svg>

            <!-- 大泽山保护区 - 高山森林图标 -->
            <svg v-else-if="area.id === 3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M3 20h18"/>
              <path d="M6 20v-6l6-6 6 6v6"/>
              <path d="M9 14l3-3 3 3"/>
              <circle cx="10" cy="16" r="1"/>
              <circle cx="14" cy="16" r="1"/>
              <path d="M8 12c0-1 1-2 2-2s2 1 2 2"/>
              <path d="M14 12c0-1 1-2 2-2s2 1 2 2"/>
            </svg>

            <!-- 崂山保护区 - 名山图标 -->
            <svg v-else-if="area.id === 4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M3 20h18"/>
              <path d="M4 20l4-8 4 4 4-8 4 8"/>
              <path d="M8 12l2-4 2 4"/>
              <path d="M16 12l2-6 2 6"/>
              <circle cx="12" cy="6" r="1"/>
              <path d="M10 4h4"/>
            </svg>

            <!-- 胶州艾山保护区 - 丘陵山地图标 -->
            <svg v-else-if="area.id === 5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M3 20h18"/>
              <path d="M5 20c0-4 2-8 4-10s4-2 6 0 4 6 4 10"/>
              <path d="M9 14c1-1 2-1 3 0s2 1 3 0"/>
              <circle cx="8" cy="16" r="0.5"/>
              <circle cx="16" cy="16" r="0.5"/>
              <path d="M12 10v2"/>
            </svg>

            <!-- 马山保护区 - 地质公园图标 -->
            <svg v-else-if="area.id === 6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M3 20h18"/>
              <rect x="6" y="10" width="2" height="10"/>
              <rect x="10" y="8" width="2" height="12"/>
              <rect x="14" y="12" width="2" height="8"/>
              <rect x="18" y="14" width="2" height="6"/>
              <path d="M4 6l4-2 4 2 4-2 4 2"/>
              <circle cx="12" cy="4" r="1"/>
            </svg>

            <!-- 默认图标（备用） -->
            <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M3 6h18"/>
              <path d="M3 12h18"/>
              <path d="M3 18h18"/>
            </svg>
          </div>

          <h3>{{ area.name }}</h3>
          <p class="area-type">{{ area.type }}</p>
        </el-card>
      </el-col>

      <!-- 当前选中的保护区详情 -->
      <el-col :span="24" class="area-detail-section">
        <el-card class="area-detail-card">
          <template #header>
            <div class="area-detail-header">
              <h3>{{ currentArea.name }}</h3>
              <el-tag>{{ currentArea.type }}</el-tag>
            </div>
          </template>

          <div class="area-detail-content">
            <div class="area-info">
              <p><strong>面积：</strong>{{ currentArea.area }}</p>
              <p><strong>位置：</strong>{{ currentArea.location }}</p>
              <p><strong>简介：</strong>{{ currentArea.description }}</p>
            </div>

          </div>
        </el-card>
      </el-col>
    </el-row>
      </div>
    </el-main>
  </el-container>
</template>

<style scoped lang="scss">
.app-container {
  height: 100vh;
  width: 100%;
}

.home-container {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.welcome-card {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 2rem;
  border-top: 4px solid #2e7d32;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    h2 {
      margin: 0;
      font-size: 1.5rem;
      color: #2e7d32;
      position: relative;
      padding-left: 1rem;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 70%;
        background-color: #2e7d32;
        border-radius: 2px;
      }
    }
  }
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;

  .avatar {
    margin-right: 1.5rem;
  }

  .info {
    h3 {
      margin: 0 0 0.5rem 0;
      font-size: 1.2rem;
    }

    p {
      margin: 0.5rem 0;
    }
  }
}

.welcome-message {
  background-color: #f1f8e9;
  padding: 1rem;
  border-radius: 8px;
  border-left: 4px solid #8bc34a;

  p {
    margin: 0;
    line-height: 1.6;
    color: #33691e;
  }
}

// 青岛自然保护区部分
.protection-area-section {
  margin-top: 2rem;

  .section-title {
    font-size: 1.5rem;
    color: #2e7d32;
    margin-bottom: 1.5rem;
    position: relative;
    padding-left: 1rem;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 70%;
      background-color: #2e7d32;
      border-radius: 2px;
    }
  }
}

.area-card {
  height: 100%;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 1.5rem;
  border: 1px solid #e0e0e0;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
    border-color: #4caf50;
  }

  &.active {
    border-color: #2e7d32;
    box-shadow: 0 8px 16px rgba(46, 125, 50, 0.2);

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background-color: #2e7d32;
      border-radius: 4px 4px 0 0;
    }
  }

  .area-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;

    svg {
      width: 48px;
      height: 48px;
      color: #2e7d32;
    }
  }

  h3 {
    font-size: 1.1rem;
    color: #2e7d32;
    margin-bottom: 0.5rem;
    text-align: center;
  }

  .area-type {
    color: #666;
    text-align: center;
    font-size: 0.9rem;
  }
}

.area-detail-section {
  margin-top: 1rem;
}

.area-detail-card {
  margin-top: 1rem;
  border-top: 4px solid #2e7d32;

  .area-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    h3 {
      margin: 0;
      font-size: 1.3rem;
      color: #2e7d32;
    }
  }

  .area-detail-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    .area-info {
      p {
        margin: 0.5rem 0;
        line-height: 1.6;

        strong {
          color: #2e7d32;
        }
      }
    }

    .area-actions {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      margin-top: 1rem;
      justify-content: center;
    }
  }
}

// 响应式调整
@media (max-width: 768px) {
  .home-container {
    padding: 1rem;
  }

  .area-detail-content {
    flex-direction: column;
  }

  .area-actions {
    margin-top: 1rem;
  }
}
</style>
